// third example of jQuery and key input handling
// this js will handle multi-key input.
// we add ball movement

// Game running structure:

//  loopHead:
//      get input
//      process input
//      update internals
//      check for game over
//      goto loopHead
//
//  we loop around after a given interval.. eg. frame rate of 30 per second
//

//NB.   paddleA is the LHS one
//      paddleB is the RHS
//
var KEY = {
        UP: 38,
        DOWN: 40,
        W: 87,
        S: 83
    },
    pingpong = {
        pressedKeys:[],
        ball: {
            speed: 5,
            x:150,
            y:100,
            height: 20,
            width: 20,
            directionX: 1,
            directionY: 1
        }
    };
        
$(function(){
    // set interval to call gameloop every 30 milliseconds
    pingpong.timer = setInterval(gameloop,30);
    
    // mark down what key is down and up into an array called "pressedKeys"
    $(document).keydown(function(e){
        pingpong.pressedKeys[e.which] = true;
    });
    $(document).keyup(function(e){
        pingpong.pressedKeys[e.which] = false;
    });
});

// the loop function
function gameloop() {
    moveBall();
    movePaddles();
}


function movePaddles() {
    // use our custom timer to continuously check if a key is pressed.
    if (pingpong.pressedKeys[KEY.UP]) { // arrow-up
        // move the paddle B up 5 pixels
        var top = parseInt($("#paddleB").css("top"));
        $("#paddleB").css("top",top-5);
    }
    if (pingpong.pressedKeys[KEY.DOWN]) { // arrow-down
        // move the paddle B down 5 pixels
        var top = parseInt($("#paddleB").css("top"));
        $("#paddleB").css("top",top+5);
    }
    if (pingpong.pressedKeys[KEY.W]) { // w
        // move the paddle A up 5 pixels
        var top = parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top",top-5);
    }
    if (pingpong.pressedKeys[KEY.S]) { // s
        // move the paddle A down 5 pixels
        var top = parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top",top+5);
    }
}

function moveBall() {
    // lets get some useful bits here
    var playgroundHeight = parseInt($('#playground').height()),
        playgroundWidth = parseInt($('#playground').width()),
        ball = pingpong.ball;
        
    // check against the playground boundary
    // bottom edge
    if (ball.y + ball.speed*ball.directionY + ball.height > playgroundHeight) ball.directionY = -1;
    // top edge
    if (ball.y + ball.speed*ball.directionY < 0) ball.directionY = 1;
    // right edge
    if (ball.x + ball.speed*ball.directionX  + ball.width > playgroundWidth) ball.directionX = -1;
    // left edge
    if (ball.x + ball.speed*ball.directionX < 0) ball.directionX = 1;
    
    ball.x += ball.speed * ball.directionX;
    ball.y += ball.speed * ball.directionY;
    
    // we check moving paddles here.. for Eg 4
    
    // move the ball element in the DOM
    $('#ball').css({
        'left': ball.x,
        'top': ball.y
    });
}








